<template>
<el-table 
    :data="dataMap.finalTableData" 
    row-key="id"
    :default-expand-all="expandAll"
    :border="isBorder"
    style="width: 100% !important;height:100% !important;margin-top:5px;"
    @select="fetchSelection"
    @select-all="fetchSelection"
    ref="multipleTableRef"
    >
    <el-table-column v-if="displaySelection" type="selection" width="55" />
    <template v-for="(item,key) in filters">
        <el-table-column :prop="key" :label="item.title" v-if="item.is_list == 1" />
    </template>
    <el-table-column fixed="right" :label="filters.table_options.title" :width="filters.table_options.width" v-if="filters.table_options">
        <template #default="scope">
            <template  v-for="item in filters.table_options.buttons">
                <el-button v-if="item.button_type == 1" :type="item.icon_type" size="small" @click="tableHandleFun1(scope)">{{item.text}}</el-button>
                <el-button v-if="item.button_type == 2" :type="item.icon_type" size="small" @click="tableHandleFun2(scope)">{{item.text}}</el-button>
                <el-button v-if="item.button_type == 3" :type="item.icon_type" size="small" @click="tableHandleFun3(scope)">{{item.text}}</el-button>
                <el-button v-if="item.button_type == 4" :type="item.icon_type" size="small" @click="tableHandleFun4(scope)">{{item.text}}</el-button>
            </template>
        </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
import {reactive,onMounted,watch,ref,nextTick,provide} from 'vue'
const emit = defineEmits(['getTotalSelections','tableHandleFun1','tableHandleFun2','tableHandleFun3','tableHandleFun4']);
const multipleTableRef = ref(null);

let dataMap = reactive({
    finalTableData:[],
    currentPageSelect:[],
    totalSelections:[],
});
const props = defineProps({
    filters:{
      type:Object,
      default:()=>{
        return [];
      }
    },
    tableData:{
      type:Object,
      default:()=>{
        return {};
      }
    },
    displaySelection:{
        type:Boolean,
        default:true
    },
    expandAll:{
        type:Boolean,
        default:true
    },
    isBorder:{
        type:Boolean,
        default:false
    }
})

const tableHandleFun1 = (scope)=>{
    emit('tableHandleFun1',scope.row);
}
const tableHandleFun2 = (scope)=>{
    emit('tableHandleFun2',scope.row);
}
const tableHandleFun3 = (scope)=>{
    emit('tableHandleFun3',scope.row);
}
const tableHandleFun4 = (scope)=>{
    emit('tableHandleFun4',scope.row);
}

const fetchSelection = (selections)=>{
    if(selections.length > 0){
        let totalIds = dataMap.totalSelections.map(obj=>obj.id)
        let selectionIds = selections.map(obj=>obj.id)
        let removeIds = [];
        dataMap.finalTableData.forEach((v,k)=>{
            if(selectionIds.indexOf(v.id) === -1){
                removeIds.push(v.id)
            }
        })
        for(let i in removeIds){
            dataMap.totalSelections.forEach((v,k)=>{
                if(v.id == removeIds[i]){
                    dataMap.totalSelections.splice(k,1)
                }
            })
        }
        selections.forEach((v,k)=>{
            if(totalIds.indexOf(v.id) === -1){
                dataMap.totalSelections.push(v)
            }
        })
    }else{
        //一个都没选
        let removeIds = dataMap.finalTableData.map(obj=>obj.id)
        for(let i in removeIds){
            dataMap.totalSelections.forEach((v,k)=>{
                if(v.id == removeIds[i]){
                    dataMap.totalSelections.splice(k,1)
                }
            })
        }
    }
    emit('getTotalSelections',dataMap.totalSelections);
}



watch(
    [()=>props.tableData],([newTableDataVal],[oldTableDataVal])=>{
        let tableData = newTableDataVal;
        renderTableData(tableData);
        dataMap.finalTableData = tableData;

        if(props.filters.table_options){
            renderFunction(props.filters.table_options.buttons);
        }
        nextTick(()=>{
            //设置选中
            let totalSelectIds = dataMap.totalSelections.map(obj=>obj.id);
            dataMap.finalTableData.forEach((v)=>{
                if(totalSelectIds.indexOf(v.id) !== -1){
                    multipleTableRef.value.toggleRowSelection(v,true);
                }
            })
        })
    }
)
const renderTableData = (data)=>{
    //处理一下table数据
    data.map((node)=>{
        const tempNode = node;
        for(let j in props.filters){
            if(props.filters[j].is_list == 1){
                //判断是否存在键值listData
                if(Object.keys(props.filters[j]).indexOf('listData') !== -1){
                    if(Object.keys(props.filters[j]).indexOf('list_data') === -1){
                        tempNode[j] = props.filters[j].listData[tempNode[j]]
                    }else{
                        tempNode[j] = props.filters[j].listData[tempNode[j]][props.filters[j].list_data['dropdownValue']]
                    }
                }
            }
        }
        if(tempNode.children && tempNode.children.length > 0){
            renderTableData(tempNode.children);
        }
    })
}
const renderFunction = (buttons)=>{
    let emitFunctions = ['getSelections'];
    buttons.forEach((v,k)=>{
        emitFunctions.push(v.clickFunctionName);
    })
}
const clearSelections = ()=>{
    nextTick(()=>{
        multipleTableRef.value.clearSelection();
    })
    dataMap.totalSelections = [];
    emit('getTotalSelections',dataMap.totalSelections);
}
//暴露方法给父组件
defineExpose({
    clearSelections
});
</script>
<style leng="scss" scoped>

</style>